<template>
  <div class="bigbox">
    <!-- 表头盒子 -->
    <div class="leftbox">
      <!-- 树节点过滤 -->
      <div class="typeselect">
        <span style="width:100px;">组织类型</span>
        <span>
          <el-select
            v-model="zzlx"
            placeholder="请选择"
            size="small"
            style="width: 100%"
            @change="changetype"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.text"
              :value="item.value"
              class="option"
            ></el-option>
          </el-select>
        </span>
      </div>
      <div>
        <el-input
          placeholder="输入关键字进行过滤"
          size="small"
          v-model="filterText"
        >
        </el-input>
      </div>
      <!-- 树组件 -->
      <div style="margin-top: 15px">
        <el-tree
          ref="tree"
          :props="props"
          v-if="treeVisible"
          :highlight-current="true"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          :load="loadNode"
          lazy
        >
          <span slot-scope="{ node, data }" class="slot-t-node">
            <template>
              <img
                class="node-img"
                v-if="data.bizOrgType == '03' || data.bizOrgType == '30'"
                src="../../assets/node0.png"
              />
              <img
                class="node-img"
                v-if="data.bizOrgType == '04' || data.bizOrgType == '40'"
                src="../../assets/node1.png"
              />
              <span :style="{ 'font-size': '14px', color: '#000' }">{{
                node.label
              }}</span>
            </template>
          </span>
        </el-tree>
      </div>
    </div>
    <!-- 盒子主体 -->
    <div class="bodybox">
      <!-- 新增按钮 -->
      <div class="top">
        <h4 :style="{ 'font-size': '20px' }" class="title">
          {{ orgName || "请选择企业" }}
        </h4>
      </div>
      <div class="main">
        <div class="permiss-group" v-for="item in treeList" :key="item.id">
          <h5 :style="{ 'font-size': '16px', 'margin-bottom': '10px' }">
            {{ item.name }}
          </h5>
          <el-checkbox-group class="permiss-group-i" v-model="selectedOptions">
            <el-checkbox
              class="permiss-group-checkbox"
              v-for="i in item.roles"
              :key="i.id"
              :label="i.id"
              :disabled="orgNo ? false : true"
              @change="handleCheckboxChange(i.id)"
              >{{ i.name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { gettypeselectapi } from '@/api/system/BusinessOrganization'
import {
  delPermissionsApi,
  getPermissionsListApi,
  getPermissionsTreeApi,
  getTreeChildListApi,
  getTreeListApi,
  setPermissionsApi
} from '../../api/permissions'
export default {
  name: 'PremissionsIndex',
  data () {
    return {
      value: '',
      filterText: '',
      treeList: [],
      options: [],
      props: {
        label: 'bizOrgName',
        disabled: 'disabled'
      },
      orgNo: '',
      orgName: '',
      isbianji: '',
      selectedOptions: [],
      zzlx: '',
      treeVisible: true
    }
  },
  created () {
    this.getPermissionsTree()
    this.getzzlxList()
  },
  async mounted () {},
  methods: {

    // 获取权限角色树
    async getPermissionsTree () {
      const res = await getPermissionsTreeApi()
      console.log(res.data.entity.types)
      this.treeList = res.data.entity.types
    },
    // 业务类型下拉
    async getzzlxList () {
      const { data: { list } } = await gettypeselectapi({ dictType: 'BizType' })
      this.options = list
      this.zzlx = list[0].value
    },
    // 业务类型下拉选择
    changetype (val) {
      // console.log(val)
      this.treeVisible = false
      this.$nextTick(() => {
        this.treeVisible = true
      })
    },
    async handleCheckboxChange (id) {
      if (!this.orgNo) {
        return this.$message('请先选择企业')
      }
      if (this.selectedOptions.includes(id)) {
        try {
          await setPermissionsApi({ orgNo: this.orgNo, roleId: id })
          this.$message.success('修改成功')
        } catch (e) {
          console.log(e)
        }
        // 执行选中时的逻辑
        // console.log(id)
      } else {
        try {
          await delPermissionsApi({ orgNo: this.orgNo, roleId: id })
          this.$message.success('修改成功')
        } catch (e) {
          console.log(e)
        }
        // 执行取消选中时的逻辑
      }
    },

    // 树节点点击
    async handleNodeClick (val) {
      console.log(val)
      console.log(val.bizOrgNo)
      this.orgNo = val.bizOrgNo
      this.orgName = val.bizOrgName
      const res = await getPermissionsListApi({ orgNo: val.bizOrgNo })
      //   console.log(res.data.list)
      this.selectedOptions = res.data.list
    },
    // 树组件懒加载
    async loadNode (node, resolve) {
      const res = await getTreeListApi({ bizType: this.zzlx ? this.zzlx : '10' })
      console.log(res)
      if (node.level === 0) {
        // 初始的级数（最顶层）
        return resolve(res.data?.list) // 最顶层数据渲染为region
      }
      const ress = await getTreeChildListApi({
        parentOrgNo: node.data.bizOrgNo
      })
      console.log(ress)
      if (node.level === 1) {
        return resolve(ress.data?.list)
      } else if (node.level === 2) {
        return resolve(ress.data?.list)
      } else if (node.level === 3) {
        return resolve(ress.data?.list)
      }
    },
    // 树节点过滤
    filterNode (value, data) {
      if (!value) return true
      return data.bizOrgName.indexOf(value) !== -1
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-input {
  height: 32px;
}
::v-deep .el-input__inner {
  height: 32px;
}
::v-deep .el-input__icon {
  line-height: 32px;
}
.el-select-dropdown__item {
  padding-left: 10px;
}
::v-deep .el-date-editor {
  width: 100%;
}
button {
  cursor: pointer;
}
.typeselect {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bigbox {
  background-color: #f1f1f1;
  min-height: 100%;
  padding: 10px;
  display: flex;
  .leftbox {
    width: 300px;
    background-color: #fff;
    padding: 20px;
    overflow-x: auto;
    overflow-y: auto;
  }
  .bodybox {
    flex: 1;
    margin-left: 10px;
    background-color: #fff;
    padding: 20px;
    .top {
      display: flex;
      justify-content: space-between;
      text-align: right;
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 1px solid #bbbbbb;
      .buttom {
        width: 70px;
        height: 30px;
        background-color: #1890ff;
        color: #fff;
        border-radius: 3px;
        border: none;
      }
    }
  }
}

.permiss-group {
  margin-bottom: 10px;
  max-width: 90%;
  .permiss-group-checkbox {
    width: 25%;
    margin-bottom: 30px;
    margin-top: 10px;
  }
}
.node-img {
  vertical-align: middle;
  margin-right: 4px;
}

::v-deep .el-checkbox__label {
  color: #000 !important;
}
</style>
